<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/bootstrap.css" />
    <link rel="stylesheet" href="./css/bootstrap-icons.css" />
    <link rel="stylesheet" href="./css/sty.css">
    <link rel="stylesheet" href="./css/stylogin.css">
    <script src="./js/bootstrap.bundle.js"></script>
    <script src="./js/vue.js"></script>
    <script src="./js/jquery-3.6.0.js"></script>

    <title>KFC-登录</title>
  </head>
  <body>
    <!-- 导航栏 -->
    <nav class="my-nav navbar navbar-expand-lg py-3 fixed-top">
      <div class="container">
        <!-- logo -->
        <a class="logo" href="./user.html"><img src="./img/LOGO.png" src="index.html"></a>
        <!-- 小菜单 -->
        <button
          class="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#menu">
          <img src="./img/tong.svg" width="40px"></img>
        </button>

        <!-- 大菜单 -->
        <div class="collapse navbar-collapse justify-content-end" id="menu">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link " href="index.html" >首页</a>    
            </li>
            <li class="nav-item">
              <a class="nav-link " href="about.html" >关于KFC</a>
            </li>
            <li class="nav-item">
              <a class="nav-link " href="scar.html" >购物车</a>
            </li>
            <li class="nav-item active">
              <a id="goin" class="nav-link" href="login.html" >登录</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>


    <!-- 登录 -->

    <div class="container log">
      <div class="login-box">
           <div class="apple-btn login-apple">
               <li class="red-btn"></li>
               <li class="yellow-btn"></li>
               <li class="green-btn"></li>
           </div>
           <div class="title">登录</div>
           <div class="input">
               <input type="text" id="loginuser" placeholder="请输入用户名">
           </div>
           <div class="input">
               <input type="password" id="loginpassword" placeholder="请输入密码">
           </div>
           <div class="btn login-btn">
               <!-- <span onclick="mylogin()">登录</span> -->
               <span id="bt">登录</span>
           </div>
           <div class="change-box login-change">
               <div class="change-btn toSign">
                   <span>去注册</span>
               </div>
           </div>
      </div>

      <div class="sign-box">
           <div class="apple-btn sign-apple">
               <li class="red-btn"></li>
               <li class="yellow-btn"></li>
               <li class="green-btn"></li>
           </div>
           <div class="title">注册</div>
           <div class="input" id="uname">
               <input type="text" id="sign-user" placeholder="您的用户名是?">
           </div>
           <div class="input" id="upwd">
               <input type="password" id="sign-password" placeholder="请输入密码">
           </div>
           <div class="btn sign-btn">
               <span>注册</span>
           </div>
           <div class="change-box sign-change">
               <div class="change-btn toLogin">
                   <span>去登陆</span>
               </div>
           </div>         
      </div>
  </div>



  <!-- ajax -->
  <script>
    bt.onclick = function () {
      let n = loginuser.value;
      let p = loginpassword.value;
      let url = `http://127.0.0.1:8088/user/login?uname=${n}&upwd=${p}`;
      console.log(url);
      let xhr = new XMLHttpRequest();
      xhr.open("GET", url);
      xhr.setRequestHeader(
        "Content-type",
        "application/x-www-form-urlencoded;charset=utf-8"
      );
      xhr.onload = function () {
        let result = xhr.responseText;
        // msg.innerHTML = result;
        alert(result)
        goin.innerHTML = result
        window.location.href='./user.html';

      };
      xhr.send();
      // window.open('./user.html')
    };
  </script>



</body>

<!--脚本-->
<!-- <script>
  function mylogin()
  {
     var user = document.getElementById("login-user").value;
     var pwd = document.getElementById("login-password").value;
     
     if(user=="lzl"&&pwd=="123456")
     {
      window.alert("登陆成功");

      window.open("./user.html"); 

     }else{
      window.alert("登陆失败");
     }
     
  }
  
</script> -->


<script src="./js/scrlogin.js"></script>

</html>
